<template>
    <wsPage title="折扣商品分类列表">
        <div slot="page_operate">
			<Button @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
        <wsSmPanel style="min-height:300px;">
            <!-- 数据列表 -->
            <div slot="list_operate">
                <Select class="ws-form-select" v-model="topicCategory.languageCode" @on-change="changeLanguage">
					<Option :value="item.code" v-for="(item,index) in fields.languages" v-bind:key="index">{{item.motherTongue}}/{{item.english}}</Option>
				</Select>
				<Button @click="showAddTopicCategoryModal">添加分类</Button>
            </div>
            <!-- content -->
            <div slot="list_data" >
                <ws-table :data="table.data" >
                    <ws-table-column  label="名称" min-width="180" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.name}}</span>
                        </template>
                    </ws-table-column>
                    <ws-table-column  label="状态" min-width="180" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.status == 1 ? '已上架' : '未上架'}}</span>
                        </template>
                    </ws-table-column>
                    <ws-table-column  label="创建时间" min-width="180" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.createDate}}</span>
                        </template>
                    </ws-table-column>
                    <ws-table-column  label="最后更新时间" min-width="180" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.updateDate}}</span>
                        </template>
                    </ws-table-column>
                    <ws-table-column  label="分类描述" min-width="180" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.wDesc}}</span>
                        </template>
                    </ws-table-column>
                    <ws-table-column  label="操作" min-width="180" align="center">
                        <template slot-scope="scope">
                            <!-- <Button size="small" type="text" @click="topicCategoryDetails(scope.row)">查看详情</Button> -->
                            <Button size="small" type="text" @click="putDiscountGoodsCategoryModel(scope.row)">修改</Button>
                            <Button size="small" type="text" @click="deleteDiscountGoodsCategory(scope.row)">删除</Button>
                        </template>
                    </ws-table-column>
                </ws-table>
            </div>
        </wsSmPanel>
        <!-- 新增主题分类弹框 -->
        <wsModal v-model="showAddTopicCategory" ok-text="保存" title="新增主题分类" @on-ok="addDiscountGoodsCategorySave" @on-cancel="addTopicCategoryCancel">
             <Form ref="from">
                <FormItem label="语言"  required>
                    <Select  clearable  style="width: 70%;" class="ws-form-select" v-model="addTopicCategory.languageCode">
					    <Option :value="item.code" v-for="(item,index) in fields.languages" v-bind:key="index">{{item.motherTongue}}/{{item.english}}</Option>
                    </Select>
                </FormItem> 
                <FormItem label="名称" required>
                    <Input type="text"  placeholder="请输入..." v-model="addTopicCategory.name"/>
                </FormItem>  
                <FormItem label="主题分类简介" required>
                    <Input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..." v-model="addTopicCategory.wDesc"/>
                </FormItem>                   
             </Form>
        </wsModal>
        <!-- 修改主题分类弹框 -->
        <wsModal v-model="showPutTopicCategory" ok-text="保存" title="修改主题分类" @on-ok="putDiscountGoodsCategorySave"  @on-cancel="putTopicCategoryCancel">
             <Form ref="from">
                <FormItem label="名称" required>
                    <Input type="text"  placeholder="请输入..." v-model="putDiscountGoodsCategory.name"/>
                </FormItem>  
                <FormItem label="主题分类简介" required>
                    <Input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..." v-model="putDiscountGoodsCategory.wDesc"/>
                </FormItem>                   
             </Form>
        </wsModal>
    </wsPage>
</template>

<script>
import Util from '../../../common/util.js';
import FileUtil from '../../../common/file.js';
import Common from '../../../common/common.js';
import $ from "jquery";
export default {
    data(){
        return {
            showAddTopicCategory:false, //默认不显示新增主题分类弹框
            showPutTopicCategory:false, //默认不显示修改主题分类弹框
            table: {
                data: [],
                page: {
                    total: 0, //总条数
                    pageNum: 1, //当前页
                    pageSize: 10 //每页显示条数
                },
                selection: [] //选中
            },
            // 语言类型
            fields: {
                languages: []
            },
            topicCategory:{
                languageCode:'zh',
                list:[], //存放主题分类列表
            },
            // 新增主题分类
            addTopicCategory:{
                languageCode:'zh',
                wDesc:'',
                name:''
            },
            // 修改主题分类
            putDiscountGoodsCategory:{
                wDesc:'',
                name:'',
                id:''
            },
        }
    },
    computed:{

    },
    mounted(){
        this.init();
    },
    methods:{
        //刷新
        refresh() {
            this.addTopicCategory.name='';
            this.addTopicCategory.languageCode='zh';
            this.addTopicCategory.wDesc='';
            this.putDiscountGoodsCategory.id='';
            this.putDiscountGoodsCategory.name='';
            this.putDiscountGoodsCategory.wDesc='';
            this.table.data = [];
            this.table.page.total = 0; //总条数
            this.table.page.pageNum = 1; //当前页
            this.table.page.pageSize = 10; //每页显示条数
            this.table.selection = []; //选中
            this.init();
        },
        init(){
            this.initLanguages();
            this.getDiscountGoodsCategoryList();
        },
         /**
         * 加载翻译语言列表
         */
        initLanguages() {
            const _this = this;
            this.axios.get('/ws/ops/v2/languages/translatable').then(response => {
                var res = response.data;
                var resMeta = res.meta;
                if(0 == resMeta.code) {
                    _this.fields.languages = res.data;
                } else {
                    _this.$Message.warning(resMeta.message);
                }
            });
        },
        // 获取折扣商品分类列表数据
        getDiscountGoodsCategoryList(){
            let _this=this;
            this.axios.get('/ws/ops/product/categorys?languageCode='+_this.topicCategory.languageCode).then(response=>{
                var res=response.data;
                var resMeta=res.meta;
                if(0==resMeta.code){
                    _this.table.data=res.data;
                }else{
                    _this.$Message.warning(resMeta.message);
                }
            })
        },
        // 切换语言查询主题分类列表
        changeLanguage(){
            this.getDiscountGoodsCategoryList();
        },
        // 显示新增主题分类弹框
        showAddTopicCategoryModal(){
            this.showAddTopicCategory=true;
            this.addTopicCategory.name='';
            this.addTopicCategory.wDesc='';
        },

        // 保存折扣商品分类
        addDiscountGoodsCategorySave(){
            let _this=this;
            let postData={
                "name":_this.addTopicCategory.name,
                "wDesc":_this.addTopicCategory.wDesc,
                "languageCode":_this.addTopicCategory.languageCode
            }
            this.axios.post('/ws/ops/product/category',postData).then(response=>{
                var res=response.data;
                var resMeta=res.meta;
                if(0==resMeta.code){
                    _this.$Message.info('折扣商品分类成功');
                    _this.showAddTopicCategory=false;
                    this.getDiscountGoodsCategoryList();
                }else{
                     _this.$Message.warning(resMeta.message);
                }
            })
        },
        // 取消新增主题分类
        addTopicCategoryCancel(){
            this.showAddTopicCategory=false;
        },
        // 修改主题分类
        putDiscountGoodsCategoryModel(_row){
            this.showPutTopicCategory=true;
            this.putDiscountGoodsCategory.name='';
            this.putDiscountGoodsCategory.wDesc='';
            this.putDiscountGoodsCategory.id='';
            this.putDiscountGoodsCategory.id=_row.id;         
        },
        // 保存修改主题分类信息
        putDiscountGoodsCategorySave(){
            let _this=this;
            let putData={
                "name":_this.putDiscountGoodsCategory.name,
                "wDesc":_this.putDiscountGoodsCategory.wDesc
            };
            if(Util.vad.isBlank(putData.name)){
                this.$Message.info("请输入名称");
                return;
            }
            this.axios.put('/ws/ops/product/category/'+_this.putDiscountGoodsCategory.id,putData).then(response=>{
                var res=response.data;
                var resMeta=res.meta;
                if(0==resMeta.code){
                    _this.$Message.info('修改主题分类成功');
                    _this.showPutTopicCategory=false;
                    this.getDiscountGoodsCategoryList();
                }else{
                    _this.$Message.warning(resMeta.message);
                }
            })

        },

        // 取消保存修改主题分类
        putTopicCategoryCancel(){
            this.showPutTopicCategory=false;
        },

        // 删除主题分类
        deleteDiscountGoodsCategory(_row){
            let _this=this;
            this.$confirm({
                title: "操作提示",
                width: 300,
                content: "你确认删除吗?",
                onOk: function() {
                    _this.makeSureDeleteDiscountGoodsCategory(_row.id);
                }
            });
        },
        makeSureDeleteDiscountGoodsCategory(id){
            let _this=this;
            this.axios.delete('/ws/ops/product/category/'+id).then(response=>{
                var res=response.data;
                var resMeta=res.meta;
                if(0==resMeta.code){
                    _this.$Message.info('删除主题分类成功');
                    this.getDiscountGoodsCategoryList();
                }else{
                    _this.$Message.warning(resMeta.message);
                }
            })
        },

        // 查看主题分类详情
        topicCategoryDetails(_row){
            // 跳转详情页面
            this.$router.push({path:'/topicCategory/details',query:{id:_row.id,name:_row.name}})
        },



    }
}
</script>
<style>

</style>
